// 内边距大小
$lsPadding: 40rpx;
$lsPaddingBottom: calc($lsPadding + env(safe-area-inset-bottom, 0));

.signature {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;

  &__main {
    position: relative;
  }

  &__canvas {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px dotted #E0E0E0;
    border-radius: 10rpx;
    cursor: pointer;
  }

  &__canvas--disabled {
    opacity: 0.85;
  }

  &__placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #333;
  }

  &__operation {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 20rpx 20rpx 0 20rpx;
  }

  &__tip {
    font-size: 24rpx;
  }

  &__btn-container {
    margin-top: 8px;

    .signature__btn + .signature__btn {
      margin: 0 0 0 20rpx;
    }
  }
}

// 横屏状态样式
.signature.signature--landscape {
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: $lsPadding $lsPadding $lsPaddingBottom;
  z-index: 9999;
  background-color: #FFF;

  .signature__main {
    flex: 1;
    width: 100%;
    max-height: 88%;
  }

  .signature__operation {
    align-items: center;
    margin: 0 10rpx 0 0;
    transform: rotate(90deg);
    transform-origin: center;
  }

  .signature__placeholder {
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    top: 50%;
    left: 50%;
  }

  .signature__btn-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    .signature__btn {
      margin: 0 0 40rpx 0;
    }
  }
}
